<template>
  <div class="information">
    <div style="background-color: #fff;">
      <el-form :model="queryForm" label-width="100px">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="客户电话:">
              <el-input v-model="queryForm.customerId" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户姓名:">
              <el-input v-model="queryForm.customerName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单状态:">
              <el-select
                v-model="queryForm.orderStatus"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in orderStatusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button plain @click="query">查询</el-button>
            <el-button plain @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table :data="tableData" ref="tableRef" style="width: 100%;">
      <el-table-column align="center" fixed prop="customerId" label="客户电话" width="90" />
      <el-table-column align="center" fixed prop="customerName" label="客户姓名" width="90" />
      <el-table-column align="center" prop="reviewStartTime" label="选题起始时间" width="120">
        <template #default="scope">
          <div>{{ scope.row.reviewStartTime.substring(0, 10) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="reviewEndTime" label="选题剩余时间">
        <template #default="scope">
          <div v-if="scope.row.reviewEndTime==0">已结束</div>
          <div v-else-if="scope.row.reviewEndTime<=2&&scope.row.reviewEndTime>0" style="color:red">{{ scope.row.reviewEndTime }}</div>
          <div v-else>{{ scope.row.reviewEndTime }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="headlineStartTime" label="开题起始时间" width="120">
        <template #default="scope">
          <div>{{ scope.row.headlineStartTime.substring(0, 10) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="headlineEndTime" label="开题剩余时间">
        <template #default="scope">
          <div v-if="scope.row.headlineEndTime==0">已结束</div>
          <div v-else-if="scope.row.headlineEndTime<=2&&scope.row.headlineEndTime>0" style="color:red">{{ scope.row.headlineEndTime }}</div>
          <div v-else>{{ scope.row.headlineEndTime }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="firstStartTime" label="初稿起始时间" width="120">
        <template #default="scope">
          <div>{{ scope.row.firstStartTime.substring(0, 10) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="firstEndTime" label="初稿剩余时间">
        <template #default="scope">
          <div v-if="scope.row.firstEndTime==0">已结束</div>
          <div v-else-if="scope.row.firstEndTime<=2&&scope.row.firstEndTime>0" style="color:red">{{ scope.row.firstEndTime }}</div>
          <div v-else>{{ scope.row.firstEndTime }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="finalizeStartTime" label="定稿起始时间" width="120">
        <template #default="scope">
          <div>{{ scope.row.finalizeStartTime.substring(0, 10) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="finalizeEndTime" label="定稿剩余时间">
        <template #default="scope">
          <div v-if="scope.row.finalizeEndTime==0">已结束</div>
          <div v-else-if="scope.row.finalizeEndTime<=2&&scope.row.finalizeEndTime>0" style="color:red">{{ scope.row.finalizeEndTime }}</div>
          <div v-else>{{ scope.row.finalizeEndTime }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="orderStatus" label="订单状态" width="80" />
      <el-table-column align="center" prop="thesisTitle" label="论文题目" width="100" />
    </el-table>
    <div>
      <el-pagination
        @current-change="currentChange"
        :current-page="pageing.page" 
        :page-size="pageing.size"
        :total="pageing.total"
        style="float: right"
        layout=" prev, pager, next"
      />
    </div>
  </div>
</template>

<script setup name="information">
  import {reactive,onMounted,getCurrentInstance,onActivated} from 'vue'
  import { stageList } from "@/api/modules/upload";
  import { ElNotification } from 'element-plus'
  // el-table支持鼠标横向拖拽滚动
  const { proxy } = getCurrentInstance()
  const tableRef = ref()
  nextTick(() => {
    if (tableRef.value) {
      proxy.$dragTable(tableRef)
    }
  })
  // 订单状态列表
  const orderStatusList = reactive([
    {
      value: '计划',
      label: '计划',
    },
    {
      value: '已结束',
      label: '已结束',
    },
  ])
  // 查询表单
  const queryForm = reactive({
    customerId: '',
    customerName: '',
    orderStatus:'',
  })
  // 所属阶段表格
  const tableData = reactive([]);
  const tableDataed = reactive([]);

  // 定义分页字段
  const pageing = ref({
    total:0,
    page:1,
    size:5,
  })
  // 选择第几页
  const currentChange = (val)=> {
    console.log("翻页，当前为第几页", val);
    tableData.length=0;
    for(let i=0;i<5;i++){
      console.log(tableDataed[(val-1)*5+i]); 
      if(tableDataed[(val-1)*5+i]){
        tableData.push(tableDataed[(val-1)*5+i])
      }
    } 
    pageing.value.page = val;
    console.log(pageing.value.total);
  }
  // 默认加载阶段管理
  onActivated(()=>{
    stageFun();
  })
  // 1.执行获取阶段管理接口
  const stageFun = async()=>{
    const { data } = await stageList();
    // console.log(data);
    // Object.assign(tableData,data);
    tableDataed.length=0
    Object.assign(tableDataed,data);
    pageing.value.total = data.length;
    currentChange(1)
  }
  // 查询
  const query = async() =>{
    const { data } = await stageList({...queryForm});
    // tableData.length = 0;
    // Object.assign(tableData,data);
    tableDataed.length=0
    Object.assign(tableDataed,data);
    pageing.value.total = data.length;
    currentChange(1)
  }
  // 重置
  const reset = () =>{
    const obj = {
      customerId: '',
      customerName: '',
      orderStatus:'',
    }
    Object.assign(queryForm,obj);
    stageFun();
  }
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
